<template>
  <div class="v-figure-card" :style="[{ width: state.width, height: state.height }, state.style]" v-size-change:10="resize">
    <slot></slot>
  </div>
</template>
<script setup>
  import { provide, reactive, onMounted, watch, nextTick } from 'vue'
  import { tool } from '@v-model/shared--utils'
  import useTheme from '@v-model/shared--hooks/src/use-theme'
  const { theme } = useTheme()

  const props = defineProps({
    id: {
      type: [String],
      default: () => '',
    },
    width: {
      type: [String],
      default: () => '100%',
    },
    height: {
      type: [String],
      default: () => '100%',
    },
    style: {
      type: [Object, String],
      default: () => {},
    },
  })

  const state = reactive({
    id: props.id,
    width: props.width,
    height: props.height,
    style: props.style,
    trigger: 0,
  })

  watch(
    () => props,
    (newVal, oldVal) => {
      init()
    },
    { deep: true }
  )

  const init = function () {
    state.width = props.width
    state.height = props.height
    state.style = props.style
  }

  const provideData = () => {
    return {
      resize: () => state.trigger,
    }
  }
  provide('provideData', provideData)

  //广播事件
  const resize = function () {
    state.trigger++
  }

  onMounted(() => {
    if (!props.id) {
      state.id = tool.guid()
    }
    nextTick(function () {
      init()
    })
  })
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .v-figure-card {
    padding: 4px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
  .v-figure-card:hover {
    border-color: v-bind('theme.color');
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
  }
</style>
